<template>
  <el-container class="about-layout" style="background: #f5f5f5;">
    <el-header style="text-align: right; font-size: 12px;">
      <el-button type="info" @click="showDialog()" icon="el-icon-plus">添加环境</el-button>
    </el-header>
    <el-main>
      <el-table :data="tableData"
              border
              style="width: 100%">
        <el-table-column
                fixed
                prop="name"
                label="环境">
        </el-table-column>
        <el-table-column
                prop="configSize"
                label="配置数量">
        </el-table-column>
        <el-table-column
                prop="serverSize"
                label="服务数量">
        </el-table-column>
        <el-table-column
                label="操作">
          <template>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-dialog title="添加环境" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSaveProfile()">确 定</el-button>
        </div>
      </el-dialog>
  </el-container>
</template>
<style scoped>
  .about-layout > .el-header{
    background-color: #FFFFFF;
  }
  .el-main > .el-row{
    margin: 10px 0;
  }
</style>
<script>
  export default {
    created(){
      this.$store.dispatch('profile/all').then((response)=>{
        console.log(response)
        this.tableData = response;
      }).catch((error)=>{
        console.log(error)
      })
    },
    methods: {
      showDialog(){
        this.dialogFormVisible = true;
      },
      onSaveProfile(){
        this.$store.dispatch('profile/save', this.form).then((response) => {
          console.log(response)
          this.$alert('保存成功', "成功提示", {
            confirmButtonText: '确定'
          });
        }).catch((error) => {
          this.$alert(error.message, "错误提示", {
            confirmButtonText: '确定'
          });
        })
        this.dialogFormVisible = false;
      },
    },
    data(){
      return {
        tableData: [{
          name: 'DEV',
          configSize: '20',
          serverSize: '10',
        }, {
          name: 'TEST',
          configSize: '20',
          serverSize: '10',
        }, {
          name: 'PRO',
          configSize: '20',
          serverSize: '10',
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          name: ''
        },
        formLabelWidth: '120px',
      };
    }
  }
</script>